<template>
  <div :class="['detailSideBar', isFoldSearch ? 'isFold' : '']">
    <div class="intersperse flex align-center justify-center">
      <i class="sjcj sjcj-chaxun" @click="foldHandle"></i>
    </div>
    <div class="formMain" v-if="!hideForm" :style="{height: isFoldSearch ? 'calc(100% - 90px)' : 'calc(100% - 180px)'}">
        <div class="formBox">
          <el-form
              label-position="top"
              label-width="auto"
              :model="searchForm"
          >
            <el-form-item label="清查唯一标识码">
              <el-input v-model="searchForm.qcwybsm" placeholder="请输入清查唯一标识码"/>
            </el-form-item>
            <el-form-item label="合并来源">
              <el-input v-model="searchForm.hbly" placeholder="请输入合并来源"/>
            </el-form-item>
            <el-form-item label="单位名称">
              <el-input v-model="searchForm.dwmc" placeholder="请输入单位名称"/>
            </el-form-item>
            <el-form-item label="单位类型">
              <el-input v-model="searchForm.dwlx" placeholder="请选择单位类型"/>
            </el-form-item>
            <el-form-item label="法定代表人">
              <el-input v-model="searchForm.fddbr" placeholder="请输入法定代表人"/>
            </el-form-item>
            <el-form-item label="运营状态">
              <el-input v-model="searchForm.yyzt" placeholder="请选择运营状态"/>
            </el-form-item>
            <el-form-item label="受访人">
              <el-input v-model="searchForm.sfr" placeholder="请输入受访人"/>
            </el-form-item>
            <el-form-item label="受访人联系电话">
              <el-input v-model="searchForm.sfrlxdh" placeholder="请输入受访人联系电话"/>
            </el-form-item>
            <el-form-item label="普查员姓名">
              <el-input v-model="searchForm.pcyxm" placeholder="请输入普查员姓名"/>
            </el-form-item>
            <el-form-item label="采集时间">
              <el-input v-model="searchForm.cjsj" placeholder="请选择采集时间"/>
            </el-form-item>
            <el-form-item label="提交时间">
              <el-input v-model="searchForm.tjsj" placeholder="请选择提交时间"/>
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="searchForm.zt" placeholder="请选择状态"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="btnBox flex align-center justify-between">
          <el-button icon="RefreshLeft">重置</el-button>
          <el-button type="primary" icon="Search">查询</el-button>
        </div>
    </div>
    <div class="foldBox flex align-center justify-center" @click="foldHandle">
      <i :class="['sjcj', isFoldSearch ? 'sjcj-zhankaishouqizhedie2' : 'sjcj-shouqizhedie2']"></i>
    </div>
  </div>
</template>
<script setup name="DetailSideBar">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import useAppStore from '@/store/modules/app'
const appStore = useAppStore();

let isFoldSearch = ref(false);
let hideForm = ref(false);
let searchForm = reactive({
  qcwybsm: '',
  hbly: '',
  dwmc: '',
  dwlx: '',
  fddbr: '',
  yyzt: '',
  sfr: '',
  sfrlxdh: '',
  zt: '',
  pcyxm: '',
  cjsj: '',
  tjsj: ''
});
function foldHandle(){
  if(isFoldSearch.value) {
    isFoldSearch.value = false;
    let timer = setTimeout(() => {
      hideForm.value = false;
      clearTimeout(timer);
    }, 100)
    appStore.isFoldSearchHandle(false);
  } else {
    isFoldSearch.value = true;
    hideForm.value = true;
    appStore.isFoldSearchHandle(true);
  }
}
onMounted(() => {
})
onBeforeUnmount(() => {
  appStore.isFoldSearchHandle(false);
})
</script>
<style lang="scss" scoped>
.detailSideBar{
  transition: all 0.2s;
  width: 370px;
  background: #f9f9f9;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  box-shadow: 5px 0 5px #f1f1f1;
  .intersperse{
    width: 100%;
    height: 140px;
    padding-top: 20px;
    transition: all 0.2s;
    i{
      font-size: 80px;
      color: #ccc;
      transition: all 0.2s;
    }
  }
  &.isFold{
    width: 50px;
    .intersperse{
      height: 50px;
      padding-top: 0;
      i{
        font-size: 28px;
      }
    }
  }
  .formMain{
    overflow-x: hidden;
    transition: all 0.2s;
    padding:15px 15px 0;
    box-sizing: border-box;
    .formBox{
      height: calc(100% - 50px);
      overflow-x: hidden;
      :deep .el-form-item--default{
         margin-bottom: 10px !important;
      }
    }
    .btnBox{
      height: 50px;
      border-top: 1px solid #f1f1f1;
      box-sizing: border-box;
      :deep .el-button{
        width: 100%;
      }
    }
  }
}
.foldBox{
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ccc;
  cursor: pointer;
}
</style>